<template>
  <CustomModal
    :title="
      props.type === 'add' ? $t('system.createUser') : $t('system.editUser')
    "
    v-model="visible"
    :showCancelButton="true"
    confirmText="确定"
    @confirm="modelConfirm"
  >
    <up-toast ref="uToastRef" />
    <scroll-view class="scroll-content" scroll-y>
      <uni-forms
        ref="uFormRef"
        style="overflow: auto"
        :modelValue="formData"
        :rules="rules"
      >
        <uni-forms-item name="deptIds">
          <template #label>
            <view class="nw-label">{{ $t('system.belongDept') }}</view>
          </template>
          <uni-data-picker
            :placeholder="
              g_rules.zhAndEnShowMsg(
                $t('public.pleaseSelect'),
                $t('system.belongDept')
              )
            "
            :popup-title="
              g_rules.zhAndEnShowMsg(
                $t('public.pleaseSelect'),
                $t('system.belongDept')
              )
            "
            v-model="formData.deptIds"
            :localdata="deptTree"
            @change="handleDeptChange"
          ></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="userName">
          <template #label>
            <view class="nw-label">{{ $t('system.userName') }}</view>
          </template>
          <nw-Input
            v-model="formData.userName"
            :label="$t('system.userName')"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="nickName">
          <template #label>
            <view class="nw-label">{{ $t('system.nickName') }}</view>
          </template>
          <nw-Input
            v-model="formData.nickName"
            :label="$t('system.nickName')"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="password">
          <template #label>
            <view class="nw-label">{{ $t('system.password') }}</view>
          </template>
          <nw-Input
            v-model="formData.password"
            :label="$t('system.password')"
            type="password"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="confirmPassword">
          <template #label>
            <view class="nw-label">{{ $t('system.confirmPassword') }}</view>
          </template>
          <nw-Input
            v-model="formData.confirmPassword"
            :label="$t('system.confirmPassword')"
            type="password"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="phone">
          <template #label>
            <view class="nw-label">{{ $t('system.mobileNumber') }}</view>
          </template>
          <nw-Input
            v-model="formData.phone"
            :label="$t('system.mobileNumber')"
            type="number"
            verifyType="nzint"
            :maxlength="11"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="email">
          <template #label>
            <view class="nw-label">{{ $t('system.email') }}</view>
          </template>
          <nw-Input
            v-model="formData.email"
            :label="$t('system.email')"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="roleIdList">
          <template #label>
            <view class="nw-label">{{ $t('system.role') }}</view>
          </template>
          <zxz-uni-data-select
            v-model="formData.roleIdList"
            :localdata="roleList"
            multiple
            collapseTags
            :collapseTagsNum="2"
            :placeholder="
              g_rules.zhAndEnShowMsg(
                $t('public.pleaseSelect'),
                $t('system.role')
              )
            "
            :emptyTips="$t('system.noOption')"
            @change="handleRoleChange"
          ></zxz-uni-data-select>
        </uni-forms-item>
      </uni-forms>
    </scroll-view>
  </CustomModal>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  row: {
    type: Object,
    default: () => {}
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})
const emit = defineEmits(['update'])

const uToastRef = ref(null)
const uFormRef = ref(null)
const formData = ref({
  deptIds: [],
  deptId: '',
  userName: '',
  nickName: '',
  password: '',
  confirmPassword: '',
  phone: '',
  email: '',
  roleIdList: []
})
// 校验规则
const rules = {
  deptIds: {
    rules: g_rules.selectRule(g_t('system.belongDept'))
  },
  userName: {
    rules: g_rules.userName
  },
  nickName: {
    rules: g_rules.singleLineText(g_t('system.nickName'))
  },
  password: {
    rules: g_rules.password
  },
  confirmPassword: {
    rules: g_rules.confirmPassword('password')
  },
  phone: {
    rules: g_rules.phone({
      required: false
    })
  },
  email: {
    rules: g_rules.email({
      required: false
    })
  },
  roleIdList: {
    rules: g_rules.selectRule(g_t('system.belongDept'))
  }
}
const deptTree = [
  {
    text: '一年级',
    value: '1-0',
    children: [
      {
        text: '1.1班',
        value: '1-1'
      },
      {
        text: '1.2班',
        value: '1-2'
      }
    ]
  },
  {
    text: '二年级',
    value: '2-0',
    children: [
      {
        text: '2.1班',
        value: '2-1'
      },
      {
        text: '2.2班',
        value: '2-2'
      }
    ]
  },
  {
    text: '三年级',
    value: '3-0'
  }
]
const roleList = [
  { value: 0, text: '篮球' },
  { value: 1, text: '足球' },
  { value: 2, text: '游泳' },
  { value: 3, text: '游泳' },
  { value: 4, text: '游泳' },
  { value: 5, text: '游泳' }
]

onMounted(_ => {
  // getConfig()
  console.log(props.type)
})

function getConfig() {
  g_utils.showLoading()
  g_api.device
    .apiGetFaultSwitchConfig({
      // imei: props.imei
    })
    .then(({ code, data }) => {
      if (code === 200 && data) {
        // formData.value = data
      }
    })
    .finally(_ => {
      uni.hideLoading()
    })
}

const modelConfirm = _ => {
  uFormRef.value
    .validate()
    .then(res => {
      uToastRef.value.show({
        type: 'success',
        message: g_t('system.bindSuccess')
      })
      visible.value = false
      emit('update')
    })
    .catch(err => {
      console.log('err', err)
    })
}

const handleDeptChange = e => {
  console.log('handleDeptChange:', e.detail.value)
}

const handleRoleChange = e => {
  console.log('handleRoleChange:', e)
}
</script>

<style lang="scss" scoped>
.scroll-content {
  max-height: calc(100vh - 100rpx - 48px - 44px);
}

.nw-label {
  width: 120rpx;
}
</style>
